<script setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from "element-plus";
import axios from "../../utils/http.js";

let dialogFormVisible = ref(false)
let select_list = ref([])
let form = reactive({
  username: '',
  phone: '',
  age: '',
  number: '',
  address: '',
  parents: '',
  class: ''
})

let userinfo = ref({
  username: '',
  phone: '',
  age: '',
  number: '',
  address: '',
  parents: '',
})
let data = ref([])


onMounted(() => {
  getTeacher()
  get_selectable_class()
})
let dog = ref(false)
let e_id = ref(0)
let addForm = ref()
let editForm = ref()
const phone = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('手机号不能为空'));
  }
  setTimeout(() => {
    let p = /^1[3-9]\d{9}$/;
    if (!p.test(value)) {
      callback(new Error('请输入正确的11位手机号'));
    } else {
      callback()
    }
  }, 100);
};

const number = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('身份证不能为空'));
  }
  setTimeout(() => {
    let p = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
    if (!p.test(value)) {
      callback(new Error('请输入18位身份证号'));
    } else {
      callback()
    }
  }, 100);
};
const rules = reactive({
  phone: [
    { validator: phone, trigger: 'blur' }],
  number: [
    { validator: number, trigger: 'blur' }],
})

function getTeacher() {
  axios({
    url: '/cteacher/all_teacher_manage/',
    method: 'GET',
    params: {
      username: localStorage.getItem('username')
    }
  }).then(res => {
    data.value = res.data.data
    console.log(data.value);
  }).catch(error => {
    console.log('请求失败', error);
  })
}
function get_selectable_class() {
  axios({
    url: '/cteacher/all_teacher_manage/',
    method: 'PUT',
    params: {
      username: localStorage.getItem('username')
    }
  }).then(res => {
    select_list.value = res.data.data
  })
}
function dialog(id) {
  e_id.value = id
  axios({
    url: '/cteacher/edit_teacher/' + id + '/',
    method: 'get',
  }).then(res => {
    userinfo.value = res.data.data
    dog.value = true
  })
}

function dialogForm() {
  if (!addForm.value) return
  addForm.value.validate((valid) => {
    if (valid) {
      axios({
        method: "post",
        url: '/cteacher/all_teacher_manage/',
        data: form
      }).then(res => {
        if (res.data.code == 200) {
          ElMessage.success("添加成功")
          getTeacher()
        } else if (res.data.code == 301) {
          ElMessage.warning("添加失败，数据不完整")
        } else {
          ElMessage.warning("添加失败")
        }
        dialogFormVisible.value = false
      })
    } else {
      ElMessage.warning("信息填写不规范")
    }
  })

}

function confirm_delete(id) {
  console.log(id);
  axios({
    method: "delete",
    url: '/info/deleteteacher/' + id + '/'
  }).then(res => {

    if (res.data.code == 200) {
      ElMessage({
        message: '删除成功',
        type: 'success'
      })
    } else {
      ElMessage({
        message: res.data.msg,
        type: 'warning'
      })
    }
    getTeacher()
  })
}
function edit() {
  if (!editForm.value) return
  editForm.value.validate((valid) => {
    if (valid) {
      axios({
    method: "put",
    url: '/cteacher/edit_teacher/' + e_id.value + '/',
    data: userinfo.value
  }).then(res => {
    
    if (res.data.code == 200) {
      ElMessage({
        message: '修改成功',
        type: 'success'
      })
    } else {
      ElMessage({
        message: res.data.msg,
        type: 'warning'
      })
    }
    getTeacher()
    dog.value = false
  })
    } else {
      ElMessage.warning("信息填写不规范")
    }
  })
  
}
</script>
<template>
  <el-main>
    <el-button type="primary" @click="dialogFormVisible = true">新增一名老师</el-button>
    <el-dialog v-model="dialogFormVisible" title="新增老师" width="500">
      <el-form :model="form" :rules="rules" ref="addForm">
        <el-form-item label="老师姓名" :label-width="formLabelWidth">
          <el-input v-model="form.username" autocomplete="off" />
        </el-form-item>

        <el-form-item label="老师手机号" :label-width="formLabelWidth" prop="phone">
          <el-input v-model="form.phone" autocomplete="off" />
        </el-form-item>
        <el-form-item label="老师身份证" :label-width="formLabelWidth" prop="number">
          <el-input v-model="form.number" autocomplete="off" />
        </el-form-item>
        <el-form-item label="老师地址" :label-width="formLabelWidth">
          <el-input v-model="form.address" autocomplete="off" />
        </el-form-item>
        <el-form-item label="老师年龄" :label-width="formLabelWidth">
          <el-input v-model="form.age" autocomplete="off" />
        </el-form-item>
        <el-form-item label="老师父母" :label-width="formLabelWidth">
          <el-input v-model="form.parents" autocomplete="off" />
        </el-form-item>
        <el-form-item label="老师所负责班级">
          <el-select no-data-text="暂无可选班级" v-model="form.class" placeholder="选择班级" style="width: 240px">
            <el-option v-for="item in select_list" :key="item.name" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogForm">
          添加
        </el-button>
      </template>
    </el-dialog>
  </el-main>
  <el-table :data="data" style="width: 100%">
    <el-table-column prop="username" label="姓名" width="180"></el-table-column>
    <el-table-column prop="phone" label="手机号" width="180"></el-table-column>
    <el-table-column prop="number" label="身份证" width="180"></el-table-column>
    <el-table-column prop="address" label="地址" width="180"></el-table-column>
    <el-table-column prop="age" label="年龄" width="180"></el-table-column>
    <el-table-column prop="parents" label="父母" width="180"></el-table-column>
    <el-table-column label="操作" width="180">
      <template #default="scope">
        <el-button type="text" size="small" @click="dialog(scope.row.id)" id="editButton">编辑</el-button>
        <el-popconfirm title="确认删除该用户？" confirm-button-text="是" cancel-button-text="否"
          @confirm="confirm_delete(scope.row.id)">
          <template #reference>
            <el-button size="small" type="danger" :icon="Delete">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog v-model="dog" title="编辑老师" width="500">
    <el-form :model="userinfo" ref="editForm" :rules="rules">
      <el-form-item label="老师姓名" :label-width="formLabelWidth">
        <el-input v-model="userinfo.username" autocomplete="off" />
      </el-form-item>
      <el-form-item label="老师手机号" :label-width="formLabelWidth" prop="phone">
        <el-input v-model="userinfo.phone" autocomplete="off" />
      </el-form-item>
      <el-form-item label="老师身份证号" :label-width="formLabelWidth" prop="number">
        <el-input v-model="userinfo.number" autocomplete="off" />
      </el-form-item>
      <el-form-item label="老师地址" :label-width="formLabelWidth">
        <el-input v-model="userinfo.address" autocomplete="off" />
      </el-form-item>
      <el-form-item label="老师年龄" :label-width="formLabelWidth">
        <el-input v-model="userinfo.age" autocomplete="off" />
      </el-form-item>
      <el-form-item label="老师父母" :label-width="formLabelWidth">
        <el-input v-model="userinfo.parents" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="edit">
        修改
      </el-button>
    </template>
  </el-dialog>
</template>
<style scoped></style>